<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading"  >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<scroll-view class="scroll-y" scroll-y @scrolltolower="getData" lower-threshold="60">
			<view class="">
				<view class="header-box">
					<view class="e-p-t-60 e-rela">
						<view class="rules-box" @tap="handleShowRules" v-if="rules && rules.ruleState">
							<text class="c-white e-font-24">{{$t('spellgroup.rules')}}</text>
						</view>
						<view class="content-box" v-if="$isEnglishVersion">
							<view class="c-white text-center e-p-t-60 en-title">
								GROUP BUY
							</view>
							<view class="c-white text-center en-desc">
								Buy Together Get Discount
							</view>
						</view>
						<view class="content-box" v-else>
							<view class="c-white text-center e-p-t-60 en-title">
								{{$t('spellgroup.好货就要多人拼')}}
							</view>
						</view>
					</view>
				</view>
				<view class="seckill-goods-box">
					<empty paddingTop="126rpx" :text="$t('nearby.empty')" :icon="$staticPath('default_img.png')"
						:show="isEmpty"></empty>
					<view class="e-p-l-20 e-p-r-20 seckill-goods-list" v-if="!isEmpty">

						<GoodsItem v-for="item in goodsList" :key="item.id" :info="item"></GoodsItem>
						<load-more :showLoad="showLoad"></load-more>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 规则弹窗 -->
		<e-modal :show="show" :title="$t('spellgroup.spellRules')" :showConfirmButton="false">
			<view class="e-flex-column">
				<view class="c-333 e-font-24 e-p-t-40 e-p-b-40">
					<e-parse v-if="rules" :content="rules.ruleMsg"></e-parse>
				</view>
				<view class="close-btn" @tap="show=false">
					<text class="c-white e-font-28">{{$t('spellgroup.isee')}}</text>
				</view>
			</view>
		</e-modal>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { getActivityGroupRule, getActivityGroupList } from '@/common/request/api'
	import GoodsItem from './child/goodsItem.vue'
	import { useQueryPage } from '@/common/hooks'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const {
		showLoad,
		isEmpty,
		list: goodsList,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getActivityGroupList,
		pageSize: 20
	})

	const loading = ref(true)
	const show = ref(false)
	const rules = ref({ ruleState: 0, ruleMsg: '' })
	
	const getData = () => {
		handleQueryPage()
	}

	const handleShowRules = () => {
		show.value = true
	}


	onLoad(() => {
		handleRefresh().then(() => {
			loading.value = false
		})
		getActivityGroupRule().then(res => {
			rules.value = res.data
		})
	})
</script>

<style lang="scss">
	.header-box {
		width: 100vw;
		height: 560rpx;
		background-image: url('./static/spell-group-header.jpeg');
		background-size: 100% 100%;
		z-index: -1;
	}

	.seckill-goods-box {
		margin-top: -150rpx;
	}

	.scroll-y {
		height: 100vh;
	}

	.count-down {
		padding-top: 210rpx;

		.count-down-box {
			width: 48rpx;
			height: 48rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
	}

	.rules-box {
		width: 88rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 200rpx 0 0 200rpx;
		text-align: center;
		position: absolute;
		top: 88rpx;
		right: 0;
	}

	.content-box {
		width: 600rpx;
		position: absolute;
		top: 128rpx;
		left: 50%;
		transform: translateX(-50%);

		.en-title {
			font-size: 60rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
		}

		.en-desc {
			font-size: 30rpx;
		}
	}

	.close-btn {
		width: 300rpx;
		height: 80rpx;
		background: #F5222D;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>